<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
		<title>找出颜色不同的方块</title>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			html,body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			body{
				background: #F06060;
			}
			header{
				width: 300px;
				margin: 15px auto 0;
				color: #FFA1A1;
			}
			header,.btn,.title,.again,.start p{
				font-weight: bold;
				font-size: 20px;
			}
			.time,.btn,#game_screen li,.again,.share{
				border-radius: 10px;
			}
			.time{
				margin: 0 0 0 65px;
				background: #FD9090;
				color: #FFCACA;
				padding: 3px 8px;
			}
			.btn{
				background: #FCAD26;
				border: 10px;
				padding: 5px 13px;
				color: white;
				font-size: 26px;
				float: right;
				margin: -10px 0 0 0;
			}
			
			#game_screen{
				width: 300px;
				height: 300px;
				margin: 130px auto 0;
				position: relative;
			}
			#game_screen li{
				float: left;
				border: 2px solid #DDDDDD;
				box-sizing: border-box;
				width: 50%;
				height: 50%;
			}
			#diff,.pop,.start,.decoration{
				position: absolute;
				left: 0;
				top: 0;
			}
			#diff{
				background: green;
			}
			
			.pop{
				background: #A74343;
				width: 100%;
				height: 100%;
				text-align: center;
				display: none;
			}
			.title{
				color: white;
				font-size: 30px;
				line-height: 80px;
			}
			.again{
				background: orange;
				color: white;
				padding: 10px 20px;
				margin-top: 150px;
				outline: none;
				/*border: none;*/
			}
			.share{
				background: black;
				padding: 5px 15px;
				color: white;
				font-weight: bold;
				outline: none;
				margin-top: 130px;
			}
			
			.start{
				z-index: 30;
				background: #F06060;
				width: 100%;
				height: 100%;
				text-align: center;
				color: white;
				font-size: 30px;
				line-height: 80px;
				/*display: none;*/
			}
			.start p{
				line-height: 30px;
				color: yellow;
				padding: 0 10px;
				margin: 30px 0 20px 0;
			}
			
			.decoration{
				z-index: 30;
				width: 100%;
				height: 100%;
				background: black;
				opacity: 0.9;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="start">
			<h2>The Color!</h2>
			<p>找出所有色块颜色里不同的一个 据说世界上只有3个人能玩到32关</p>
			<h3>And You!</h3>
			<button class="do again">just do it</button>
		</div>
		
		<header>
			<span>得分</span>
			<span class="score"></span>
			<span class="time"></span>
			<button class="btn">暂停</button>
		</header>
		<ul id="game_screen">
			<li id="diff"></li>
			
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
		<div class="pop">
			<p class="title">
				<span>得分</span>
				<span class="score"></span>
			</p>
			<button class="again">Try Again</button>
			<p><button class="share">分享成绩给好友</button></p>
		</div>
		<img src="img/weixin-share-guide.png" alt="" class="decoration" />
		<script type="text/javascript">
		    
			$(function(){
				var score,n;
				init();
				$('#diff').click(function(){
					if($(this).css('background-color')=='rgb(0, 128, 0)') count();
					
					//长度减一开平方得到每一行的格子数
					var l=Math.sqrt($('#game_screen li').length-1);
				    if(l<12) divide(l);
				    round(l);
				    
				    score++;
				    $('.score').text(score);
				});
				
				$('.again').click(function(){
					$('.pop').hide();
					$('.start').hide();
					$('.append').remove();
					//$(this).parent().remove();
				    init();
				});

                //每行和每列追加li
				function divide(l){
					for(i=0;i<l*2-1;i++){
						//创建li并且追加到页面
				    	var oLi=$('<li class="append"></li>');
					    $('#game_screen').append(oLi);
                        
                        //改变li的宽度和高度
                        //长度减一开平方得到每一行的格子数
                        var l=Math.sqrt($('#game_screen li').length-1);
					    $('#game_screen li').css({
							width:100/l+'%',
							height:100/l+'%'
					    });
				    } 
				}
				
				//随机改变颜色
				function round(l){
					var a=parseInt(Math.random()*140);
					var b=parseInt(Math.random()*140);
					var c=parseInt(Math.random()*140);
					var left=parseInt(Math.random()*l)*$('#diff').offset().width;
					var top=parseInt(Math.random()*l)*$('#diff').offset().height;
					$('#game_screen li').css({background:'rgba('+a+','+b+','+c+',1)'});
					
					n-=5;
					if(n<15) n=15;
					//改变特殊格子的颜色和位置
					$('#diff').css({
						background:'rgba('+(a+n)+','+(b+n)+','+(c+n)+',1)',
						left:left+'px',
						top:top+'px'
					});
				}
				
				//定时器
				function count(){
					var timer=null;
		            var time=60;
			 		timer=setInterval(function(){
						time--;
						if(time==0){
							clearInterval(timer);
							$('.pop').show();
						}
						else $('.time').text(time);
					},1000);	
				}
				
				//初始化
				function init(){
					score=0;
					n=90;
					$('.score').text(score);
					$('.time').text(60);
					$('#game_screen li').css({background:'none',width:'',height:''});
					$('#diff').css({background:'',left:'0px',top:'0px'});
				}
				
				$('.share').click(function(){
					$('.decoration').show();
				});
				$('.decoration').click(function(){
					$('.decoration').hide();
				});
			});
		     
			</script>

			<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><!-- 微信分享接口 -->
	<script id="DS_PRE_JS" type="text/javascript" 
	src="http://cdn.datastory.com.cn/js/pre-ds-min.js?dsTid=a975c262-00dd-457b-99df-433c5b0f605e"> 
	</script> <!-- 数据统计接口 -->
	<!-- 微信分享配置 -->
	<script> 
		var _url = location.href.split('#')[0];
		_url = _url.substring(0, _url.lastIndexOf("/") + 1);
		$.ajax({
			type: "post",
			async: false,
			url: _url+"weixin/index.php?js_url="+encodeURIComponent(location.href.split('#')[0]),
			dataType: "json",
			success: function(res){
				wx.config({
					debug: false,
					appId: res.appId,
					timestamp: res.timestamp,
					nonceStr: res.nonceStr,
					signature: res.signature,
					jsApiList: [
					  'onMenuShareTimeline',
					  'onMenuShareAppMessage',
					  'onMenuShareQQ',
					  'onMenuShareWeibo'
					]
				});
				var dataForWeixin = {
					title: $("title").text(), // 分享标题  
					//下面需要自行修改
					//desc: "畅快N次方，899元起", // 分享描述
					//imgUrl:_url+"img/title.jpg", // 分享图片
					//link: _url+"index.html"  // 分享链接 
					
					desc: "据说世界上只有3个人能玩到32关 " // 分享描述
					//imgUrl:"", // 分享图片
					link: "http://zhaixiankui.gotoip1.com/h5/test/sz/The_Color!/index.html"  // 分享链接 
				};
				wx.ready(function () {
					DS.ready(function () {
						wx.onMenuShareTimeline({
						  title: dataForWeixin.title,
						  link: DS.linkChange(dataForWeixin.link),
						  imgUrl: dataForWeixin.imgUrl,
						  success: function(){
							  DS.sendRepost("timeline");
						  }
						});
						wx.onMenuShareAppMessage({
						  title: dataForWeixin.title,
						  desc: dataForWeixin.desc,
						  link: DS.linkChange(dataForWeixin.link),
						  imgUrl: dataForWeixin.imgUrl,
						  success: function(){
							  DS.sendRepost("appMessage");
						  }
						});
						wx.onMenuShareQQ({
						  title: dataForWeixin.title,
						  desc: dataForWeixin.desc,
						  link: DS.linkChange(dataForWeixin.link),
						  imgUrl: dataForWeixin.imgUrl
						});
						wx.onMenuShareWeibo({
						  title: dataForWeixin.title,
						  desc: dataForWeixin.desc,
						  link: DS.linkChange(dataForWeixin.link),
						  imgUrl: dataForWeixin.imgUrl
						});
					});
				});
			},
			error: function(){
			}
		});
	</script>
	</body>
</html>
